<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% String path = request.getContextPath();%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html class="app">
<!-- 页面顶部 -->
<c:import url="/admin/commonHeader.html" />
<body class="">
	<section class="vbox">
		
		<!-- 页面顶部布局 -->
		<c:import url="/admin/headerPage.html" />
		<!--/页面顶部布局 -->
		
		<section>
			<section class="hbox stretch">
			
				<!-- 页面顶部布局 -->
				<c:import url="/admin/leftPage.html" />
				<!--/页面顶部布局 -->
	
				<section id="content">
					<section class="hbox stretch">
						<section>
							<section class="vbox">
								<section class="scrollable padder-lg w-f-md" id="bjax-target">
									<h2 class="font-thin m-b">Discover 
										<span class="musicbar animate inline m-l-sm" style="width:20px;height:20px">
											<span class="bar1 a1 bg-primary lter"></span>
											<span class="bar2 a2 bg-info lt"></span>
											<span class="bar3 a3 bg-success"></span>
											<span class="bar4 a4 bg-warning dk"></span>
											<span class="bar5 a5 bg-danger dker"></span>
										</span>
									</h2>
									
									<!-- 正文开始 -->
									<div class="row row-sm" >
										<div>
											<section class="panel panel-default">
												<header class="panel-heading">
													权限信息
												</header>
												<div class="table-responsive">
													
													<div id="toolbar" class="btn-group">
														<button id="btn_add" type="button" class="btn btn-default">
															<span class="fa fa-plus" aria-hidden="true"></span> 新增
														</button>
														<button id="btn_edit" type="button" class="btn btn-default">
															<span class="fa fa-pencil" aria-hidden="true"></span> 修改
														</button>
														<button id="btn_delete" type="button" class="btn btn-default">
															<span class="fa fa-times" aria-hidden="true"></span> 删除
														</button>
														<button id="btn_approve" type="button" class="btn btn-default">
															<span class="fa fa-puzzle-piece" aria-hidden="true"></span> 分配资源
														</button>
													</div>
													
													<table id="authorityTable" class="table table-striped b-t b-light">
													</table>
												</div>
											</section>
										</div>
									</div>
									<!-- 正文结束 -->
									
									<div class="modal fade" id="modal-info">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-body wrapper-lg">
													<div class="row">
														<div class="col-sm-12">
															<h3 class="m-t-none m-b">权限编辑</h3>
															<p>权限信息修改.</p>
															<form id="detailForm" role="form">
																<input type="hidden" id="id" name="authorityId" value="">
																
																<div class="form-group">
																	<label for="authorityName">权限名称</label>
																	<input type="text" class="form-control" id="authorityName" name="authorityName" placeholder="权限名称">
																</div>
																
																<div class="form-group">
																	<label for="remark">备注</label>
																	<input type="text" class="form-control" id="remark" name="remark" placeholder="备注">
																</div>
																
																<p class="fr">
																	<a href="#" class="btn btn-info" id="btn_save"><i class="fa fa-save (alias)"></i> 保存</a>
																	<a href="#" class="btn btn-default modal-close"><i class="fa icon-power"></i> 关闭</a>
																</p>
																
															</form>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<!-- 查询账号模态框（Modal） -->
									
									<!-- 分配权限模态框（Modal） -->
									<div class="modal fade" id="modal-role">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-body wrapper-lg">
													<div class="row">
														<div class="col-sm-12">
															<h3 class="m-t-none m-b">权限分配</h3>
															<p>权限分配</p>
															<input type="hidden" id="authorityId2" value="">
															<div class="resourceList" style="margin: 20px;">
																动态插入
															</div>
															<p class="fr">
																<a href="#" class="btn btn-info" id="btn_save_authority"><i class="fa fa-save (alias)"></i> 保存</a>
																<a href="#" class="btn btn-default modal-close"><i class="fa icon-power"></i> 关闭</a>
															</p>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</section>
								
								<!-- 底部布局 -->
								<c:import url="/admin/footerPage.html" />
								<!--/底部布局 -->
							</section>
						</section>

					<!-- 聊天部分布局 -->
					<%-- <c:import url="/admin/connectionPage.html" /> --%>
					<!--/聊天部分布局 -->
				
					</section>
					<a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
				</section>
			</section>
		</section>
	</section>
	
	<!-- 页面底部布局 -->
	<c:import url="/admin/commonFooter.html" />
	<!--/页面底部布局 -->
		
	<script>
		
	$(function(){
		//1.初始化Table
		var table = new xx_table();
		//映射列
		var columns = [{
			checkbox: true
		}, {
			field: 'authorityName',
			title: '权限名称'
		}, {
			field: 'authorityCode',
			title: '权限编码'
		}, {
			field: 'remark',
			title: '备注'
		}, {
			field: 'createDate',
			title: '创建时间'
		}, {
			field: 'updateDate',
			title: '更新时间'
		}];
		table.Init("authorityTable", "query.html", columns, false, "id", "权限名称或备注");
		//初始化表格工具栏
		var button = new xx_button();
		button.Init("authorityTable");
	});
	
	//新增事件
	function xx_add(){
		$("#modal-info-title").text("角色新增");
		//打开模态框
		xx_modal_open("#modal-info");
	}
	
	//回显
	function xx_info(id){
		$("#id").val(id);
		//ajax请求
		xx_ajax("info.html","get" , {id:id}, "json", "#toolbar", function(response){
			//视图加载
			xx_view_load.auto("#detailForm", response.authority);
		});
	}
	
	//修改
	function xx_edit(id){
		$("#modal-info-title").text("角色编辑");
		xx_info(id);
	}
	
	//保存
	function xx_save(tableName){
		//ajax请求
		xx_ajax("save.html", "post" ,$("#detailForm").serialize(), "json", "#toolbar", function(response){
			//刷新表格数据
			$("#"+tableName).bootstrapTable("refresh", null);
			xx_modal_close("#modal-info");
		});
	}
	
	$("#btn_approve").on("click", function(){
		//获取选中行
		var objArr = $("#authorityTable").bootstrapTable("getSelections", null);
		if(objArr.length == 0){
			xx_alert("info", "请选择要修改的数据！");
		}else if(objArr.length == 1){
			xx_modal_open("#modal-authority");
			//获取数据ID
			var authorityId = objArr[0].id;
			//向分配权限模态框隐藏域赋予角色ID
			$("#authorityId2").val(authorityId);
			//ajax请求
		}else{
			xx_alert("info", "只能选择一条数据！");
		}
	});
	
	</script>
	
</body>
</html>